<template>
  <div class="cu-common-layout">
    <div class="cu-common-layout-center">
      <el-row class="cu-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="5">
            <el-form-item label="校区品牌" prop="brand">
              <el-select v-model="query.brand" placeholder="">
                <el-option :key="item.id" :label="item.fullName" :value="item.enCode" v-for="item in brandOptions" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="校区信息" prop="campus">
              <el-input v-model="query.campus" placeholder="请选择校区" filterable clearable />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="处理状态" prop="followupStatus">
              <el-select v-model="query.followupStatus" placeholder="处理状态">
                <el-option :key="item.id" :label="item.fullName" :value="item.enCode" v-for="item in handlesOptions" />
              </el-select>
            </el-form-item>
          </el-col>
          <!--    <el-col :span="5">
            <el-form-item label="校区信息">
              <el-input v-model="query.campus" placeholder="请输入校区信息" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="校区状态">
              <el-input v-model="query.campusStatus" placeholder="请输入校区信息" clearable />
            </el-form-item>
          </el-col>-->
          <!--          <el-col :span="5">
            <el-form-item label="校区区域">
              <custom-address v-model="query.area" :multiple="true" />
            </el-form-item>
          </el-col>-->
          <el-col :span="4">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
              <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="cu-common-layout-main cu-flex-main">
        <div class="cu-common-head">
          <div>
            <el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">新增</el-button>
          </div>
          <div class="cu-common-head-right">
            <el-tooltip effect="dark" content="刷新" placement="top">
              <el-link icon="icon-ym icon-ym-Refresh cu-common-head-icon" :underline="false" @click="reset()" />
            </el-tooltip>
            <screenfull isContainer />
          </div>
        </div>
        <custom-table v-loading="listLoading" :data="list">
          <el-table-column prop="brand" label="标记" align="center" width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <span @click="handlePriority(scope.row.id, scope.row.priority)" style="cursor: pointer">
                <i class="icon-ym icon-ym icon-ym-extend-star" v-if="scope.row.priority" style="color: #ffd609"></i>
                <i class="icon-ym icon-ym icon-ym-extend-star-o" v-else></i>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="brand" label="校区品牌" align="center" width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.brand | dynamicCodeText(brandOptions) }}
            </template>
          </el-table-column>
          <el-table-column prop="shortName" label="校区名称" align="left" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span @click="handGetDetails(scope.row.id, true)" style="color: #00afff; cursor: pointer">
                {{ scope.row.enCode == '' ? scope.row.campusId : scope.row.shortName + '(' + scope.row.enCode + ')' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="area" label="行政区域" align="left" width="160" show-overflow-tooltip></el-table-column>
          <el-table-column prop="address" label="详细地区" align="left" min-width="200" show-overflow-tooltip></el-table-column>

          <el-table-column prop="campusStatus" label="校区状态" align="center" width="80">
            <template slot-scope="scope">
              <el-tag size="mini" v-if="scope.row.campusStatus == 'preparation'" key="筹备" type="" effect="dark">
                筹备
              </el-tag>
              <el-tag size="mini" v-if="scope.row.campusStatus == 'normal'" key="正常" type="success" effect="dark">
                正常
              </el-tag>
              <el-tag size="mini" v-if="scope.row.campusStatus == 'expires'" key="到期" type="info" effect="dark">
                待续费
              </el-tag>
              <el-tag size="mini" v-else-if="scope.row.campusStatus == 'suspended'" key="暂停" type="warning" effect="dark">
                暂停
              </el-tag>
              <el-tag size="mini" v-else-if="scope.row.campusStatus == 'close'" key="闭校" type="danger" effect="dark">
                闭校
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="manager" label="校区负责人" align="left" width="120" />
          <!--          <el-table-column prop="fullAddress" label="所在区域" align="left" width="200">-->
          <!--          </el-table-column>-->
          <el-table-column prop="managerMobile" label="联系电话" align="left" width="100"></el-table-column>
          <el-table-column prop="violationIssue" label="违规事项" align="left" min-width="160">
            <template slot-scope="scope">
              {{ scope.row.violationIssue | dynamicCodeText(violationlssueOptions) }}
            </template>
          </el-table-column>
          <el-table-column prop="description" label="违规描述" align="left" min-width="150" show-overflow-tooltip />
          <el-table-column prop="createTime" label="移交时间" align="left" :formatter="custom.tableDateFormat" width="100" />
          <el-table-column prop="createUserName" label="移交人" align="left" width="100" />

          <el-table-column prop="followupMethod" label="维权方式" align="left" width="100">
            <template slot-scope="scope">
              {{ scope.row.followupMethod | dynamicCodeText(followUpMethodOptions) }}
            </template>
          </el-table-column>
          <el-table-column prop="followupStatus" label="跟进状态" align="left" width="100">
            <template slot-scope="scope">
              {{ scope.row.followupStatus | dynamicCodeText(handlesOptions) }}
            </template>
          </el-table-column>
          <el-table-column prop="policyStatus" label="跟进记录" align="center" width="120">
            <template slot-scope="scope">
              <el-button type="text" v-if="scope.row.followupCount > 0" @click="recordsHandle(scope.row.id)">跟进记录（{{ scope.row.followupCount }}）</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160" fixed="right">
            <template slot-scope="scope">
              <el-button v-has="'btn_edit'" type="text" size="mini" :disabled="scope.row.followupCount > 0" @click="addOrUpdateHandle(scope.row, true)">编辑</el-button>
              <el-button v-has="'btn_tackle'" type="text" size="mini" @click="addHandle(scope.row.id)">处理</el-button>
              <!--              <el-button type="text" size="mini" class="cu-table-delBtn" >附件</el-button>-->
              <el-dropdown @command="handleCommandDown" v-if="scope.row.attachments && scope.row.attachments.length > 0">
                <span class="el-dropdown-link">
                  <el-button type="text">附件</el-button>
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="(item, index) in scope.row.attachments" :key="index" :command="item.url">{{ item.name }}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </custom-table>
        <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
      </div>
    </div>
    <custom-form v-if="formVisible" ref="CustomForm" @refresh="search" />
    <handle-form v-if="handleVisible" ref="HandleForm" @refresh="search" />
    <handle-records-form v-if="recordsVisible" ref="RecordsForm" @refresh="refresh" />
    <details-custom-form v-if="detailsFormVisible" ref="DetailsCustomForm" @refresh="refresh" />
  </div>
</template>
<script>
export { default } from './index.js'
</script>
<style lang="scss" scoped>
@import url(index.scss);
</style>
